<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<title>修改资料</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<script src="../js/rem.js"></script>
		<script src="../js/jquery.min.js" type="text/javascript"></script>
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/page.css" />
		<link rel="stylesheet" type="text/css" href="../css/all.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/loaders.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/loading.css" />
		<script type="text/javascript">
			$(window).load(function() {
				$(".loading").addClass("loader-chanage")
				$(".loading").fadeOut(300)
			})
		</script>
	</head>
	<!--loading页开始-->
	<div class="loading">
		<div class="loader">
			<div class="loader-inner pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	<!--loading页结束-->

	<body>
		<header class="mui-bar mui-bar-nav report-header box-s" id="header">
			<a href="javascript:history.go(-1)"><i class="iconfont icon-fanhui fl"></i></a>
			<p>修改资料</p>
		</header>
		<div id="main" class="mui-clearfix">
			<div class="plist clearfloat data">
				<ul id="userInfo">
				</ul>
			</div>
			<a onclick="update()" class="tui-btn">
				确定修改
			</a>
		</div>
	</body>
	<script src="../js/handlebar/handlebars-v4.0.11.js"></script>
	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script src="../js/fastclick.js"></script>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/hmt.js"></script>
	<script src="../js/mui.picker.js"></script>
	<script src="../js/mui.poppicker.js"></script>
	<!--注意这个3个js的导入顺序-->
	<script type="text/javascript" src="../js/common/const.js"></script>
	<script src="../js/service/request.js"></script>
	<script src="../js/service/user_service.js"></script>

	<script type="text/javascript" src="../js/common/check.js"></script>
	<script id="user-template" type="text/x-handlebars-template">
		{{#user}}
		<li class="clearfloat touxiang">
			<a href="#">
				<p class="fl">头像</p>
				<i class="fr"><img src={{imgServerPath}}/{{userface}}></i>
			</a>
		</li>
		<li class="clearfloat">
			<p class="fl">昵称</p>
			<input type="text" id="nickName" value={{nickName}} class="fr shuru" placeholder="input name" />
		</li>
		<li class="clearfloat">
			<p class="fl">学号</p>
			<input type="text" disabled="disabled" id="stuId" value={{stuId}} class="fr shuru" placeholder="input stunum" />
		</li>
		<!--<li class="clearfloat">
			<p class="fl">性别</p>
			<a id="showUserPicker"  class="sex_picker" style="width: 20px;"></a>
		</li>-->
		<li class="clearfloat">
			<p class="fl">邮箱</p>
			<input type="text" id="email" class="fr shuru" value={{email}} />
		</li>
		{{/user}}
	</script>
	<script>
		var userface;
		$(function() {
			var res = get_user_info();
			checkUserIsOnline(res); //验证用户是否登录
			if(res.resultCode == REQUEST_SUCCESS_CDOE) {
				userface = res.data.userface;
				res.data.imgServerPath = IMG_SERVER_PATH;
				var template = Handlebars.compile($("#user-template").html());
				var data = {
					"user": res.data
				};
				$('#userInfo').html(template(data));
			}

		});

		function update() {
			var user = new Object;
			user.userface = userface;
			user.nickName = $("#nickName").val();
			user.stuId = $("#stuId").val();
			user.email = $("#email").val();
			var respone = update_user_info(user);
			checkUserIsOnline(respone); //验证用户是否登录
			mui.toast(respone.msg, {
				duration: 'long',
				type: 'div'
			})
			if(respone.resultCode == REQUEST_SUCCESS_CDOE) {
				setTimeout(() => { //设置定时器，等用户看清楚了提示再关闭窗口
					//关闭当前窗口
					mui.back();
				}, 2000);

			}
		}

		//		(function($, doc) {
		//			$.init();
		//			$.ready(function() {
		//
		//				
		//			var _getParam = function(obj, param) {
		//					return obj[param] || '';
		//			};
		//				//普通示例
		//				var userPicker = new $.PopPicker();
		//				userPicker.setData([{
		//					value: '0',
		//					text: '男'
		//				}, {
		//				value: '1',
		//				text: '女'				}]);
		//				var showUserPickerButton = doc.getElementById('showUserPicker');
		//				//					var userResult = doc.getElementById('userResult');
		//			showUserPickerButton.addEventListener('tap', function(event) {
		//				userPicker.show(function(items) {
		//					showUserPickerButton.innerText = items[0].text;
		//						//返回 false 可以阻止选择框的关闭
		//						//return false;
		//					});
		//				}, false);
		//
		//			});
		//		})(mui, document);
	</script>

</html>